<style type="text/css">
	body { font-size: 62.5%; }
	label, input { display:block; }
	input.text { margin-bottom:12px; width:95%; padding: .4em; }
	fieldset { padding:0; border:0; margin-top:25px; }
	h1 { font-size: 1.2em; margin: .6em 0; }
	.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
	.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $('#gravar').click(function() {
		$.ajax({
        	type: 'POST',
            url: './admin/exec-areas.php',
            data: $('#formulario').serialize(),
            success: function(txt){
       			//alert('Registro ' + txt + ' gravado!');
       			$('#list-usuarios tbody').prepend(txt); 
       			$('#formulario').each(function(){
       		        this.reset();
       			});
            },
            error: function(txt){
        		alert('Ocorreu um erro.');
            }
        });
        return false;
    });
    $('img').hover(function() { 
        $(this).css('cursor', 'pointer'); 
    });
    $('img').click(function() {
		alert(this.id);
    });
	$(".formlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
	.find(".formlet-header")
		.addClass("ui-widget-header ui-corner-all")
		.end()
	.find(".formlet-content");	
});
</script>
<h2>Administração &raquo; Áreas</h2>
<div class='formlet'>
	<div class='formlet-header'>Nova Área</div>
	<div class='formlet-content'>
	<form id="formulario" action="exec-areas.php">
		<label for="txt_area">Área</label>
		<input type="text" name="txt_area" id="txt_area" class="text ui-widget-content ui-corner-all" />
		<label for="cbo_pai">Área Principal</label>
		<select id="cbo_pai" name="cbo_pai" class="select ui-widget-content ui-corner-all">
			<option value="0">Selecione uma opção</option>
			<?php echo mostra_areas(1,0); ?>
		</select>		
		<button id="gravar">Cadastrar</button>
	</form>	
	</div>
</div>
<div id="lista" class="ui-widget">
<table class="ui-widget ui-widget-content" id="list-usuarios">
	<thead>
		<tr class="ui-widget-header ">
			<th>ID</th>
			<th>Área</th>
			<th>Ações</th>
		</tr>
	</thead>
	<tbody>
<?php
$sql = "SELECT * FROM areas ORDER BY id DESC ";
$conexao->Executar($sql);
   if($conexao->ContarLinhas() > 0){
   	while($line = $conexao->MostrarResultados()){
       	echo "<tr>
		<td>$line[0]</td>
		<td>$line[1]</td>
       	<td><img src='$imagens/delete.png' alt='Deletar' id='$line[0]' title='Deletar' />&nbsp;<img src='$imagens/editar.png' alt='Editar' id='$line[0]' title='Editar' /></td>
		</tr>
		";
	}
}
$conexao->Liberar();        
?>
</tbody>
</table>
</div>
<br />
